<template>
	<view class="cardBox">
		<view class="loginImg">
			<image class="loginImg" src="/static/images/card/login.png" mode=""></image>
		</view>
		<view class="content">
			<view class="contentForm">
				<u-form labelPosition="top" ref="loginForm" :model="loginForm" :labelStyle="labelStyle">
					<u-form-item label="姓名" prop="name">
						<view class="formInput">
							<u-input placeholder="请输入名字" v-model="loginForm.name" clearable border="none"
								fontSize="26rpx" color="#333"
								customStyle="background:#F3F3F3;border-radius: 6px"></u-input>
						</view>
					</u-form-item>
					<u-form-item label="绑定手机号" labelWidth="100" prop="mobile">
						<view class="formInput">

							<u-input placeholder="请输入手机号" border="none" fontSize="26rpx" color="#333"
								v-model="loginForm.mobile" clearable />
						</view>
					</u-form-item>
					<u-form-item label="验证码" labelWidth="100" prop="checkCode">
						<view class="flex_wrap">
							<view class="formInput_t">
								<u-input placeholder="请输入验证码" border="none" fontSize="26rpx" color="#333"
									v-model="loginForm.checkCode" clearable />
							</view>
							<button :class="
						            codeTxt == '获取验证码' ? 'btn' : 'activebtn'
						        " @click="getValidCode">
								{{ codeTxt }}
							</button>
						</view>
					</u-form-item>
				</u-form>
				<view class="flex_wrap row_center">
					<view class="lq_btn" @click="to_success('loginForm')">
						查询
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig.js";
	export default {
		data() {
			return {
				labelStyle: {
					fontSize: "36rpx",
					color: "#333",
					fontWeight: "bold",
				},
				codeTxt: "获取验证码",
				loginForm: {
					mobile: "",
					checkCode: "",
					name: "",
				},
				loginFormRules: {
					name: [{
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					}, ],
					checkCode: {
						type: "string",
						required: true,
						len: 6,
						message: "请填写6位验证码",
						trigger: ["blur"],
					},
					mobile: [{
							required: true,
							message: "请输入手机号",
							trigger: ["change", "blur"],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							trigger: ["change", "blur"],
						},
					],
				},
			}
		},
		onReady() {
			this.$refs.loginForm.setRules(this.loginFormRules);
		},
		methods: {
			getValidCode() {
				//点击获取验证码
				let msg;
				if(this.loginForm.name == ""){
					msg = "请输入姓名";
				}else if (this.loginForm.mobile == "") {
					msg = "请输入手机号";
				} else if (!/^1[3456789][0-9]{9}$/.test(this.loginForm.mobile)) {
					msg = "手机号有误，请检查";
				} else {
					//发送验证码
					this.getPhoneSendMsm();
				}
			},
			getPhoneSendMsm() {
				//发送验证码
				const that = this;
				uni.request({
					url: baseUrl + '/customer/equityCardInfo/web/open/querySendSms',
					method: 'POST',
					data: {
						phonenumber: this.loginForm.mobile,
						realName: this.loginForm.name,
					},
					success(res) {
						if (res.data.code === 200) {
							if (that.codeFlag == false) {
								return;
							}
							that.codeFlag = false;
							var time = 30;
							that.codeTxt = time + "s";
							var timer = setInterval(() => {
								that.codeTxt = "获取验证码";
								if (time == 1) {
									that.codeFlag = true;
									clearInterval(timer);
								} else {
									time--;
									that.codeTxt = time + "s";
								}
							}, 1000);
						} else {
							uni.$u.toast(res.data.msg);
						}
					},
					fail(error) {
						uni.$u.toast(res.data.msg);
					}
				})
			},
			to_success() {
				const that = this;
				this.$refs.loginForm
					.validate()
					.then((res) => {
						uni.request({
						   url: benefitCardUrl + '/equityCardInfo/web/open/loginH5',
						    method: "POST",
						    data: {
						        phonenumber: this.loginForm.mobile,
						        realName: this.loginForm.name,
						        code: this.loginForm.checkCode,
						    },
						    success(res) {
						        console.log(res,res.data.data);
								that.$store.commit('SET_TOKEN_Benefit_Card', res.data.data);
								uni.reLaunch({
								    url: "/pages_card/benefitCard/index",
								});
						    },
						});
					})
					.catch((errors) => {
					});
			},
		}
	}
</script>

<style scoped>
	.cardBox {
		height: 100%;
		background-color: #27292D;
	}

	.loginImg {
		width: 100%;
	}

	.content {
		padding: 0 28rpx;
	}

	.contentForm {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 28rpx 54rpx;
	}

	.formInput,
	.formInput_t {
		height: 80rpx;
		background: #f3f3f3;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.formInput_t {
		width: 460rpx;
	}

	.btn {
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #F7D25B;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		padding: 0;
	}

	.activebtn {
		width: 180rpx;
		height: 80rpx;
		background: #aaa;
		border-radius: 8rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		padding: 0;
	}
	.lq_btn {
		width: 520rpx;
		height: 86rpx;
		background: linear-gradient(315deg, #E9A656 0%, #FDE3B6 100%);
		border-radius: 40000rpx 40000rpx 40000rpx 40000rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		margin-top: 80rpx;
	}
</style>